<template>
    <div class="login-wrap">
      <h1 class="title">超省星后台管理系统</h1>
      <el-form class="login-container">
        <h1 class="title">管理员登录</h1>
        <el-form-item label="账号">
          <el-input type="username" v-model="username" placeholder="登录账号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input type="password" v-model="password" placeholder="登录密码" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" style="width: 100%;" @click="dosubmit()">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>

  <script>
import axios from 'axios';

    export default {
      name: 'login',
      data: function() {
        return {
          username: "",
          password: ""
        }
      },
      methods: {
        dosubmit(){
          let params = {
            username: this.username,
            password: this.password
          };
          axios.post("/api/login",params).then(res => {
            console.log(res)
            if(res.data.code == 200){
              this.$message('登录成功');
              this.$router.push({ path: "/user" })
            }else{
              this.$message('登录失败');
            }
      })

        }
      }
    }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
    .login-wrap {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding-top: 10%;
      background-repeat: no-repeat;
      background-position: center right;
      background-size: 100%;
    }

    .login-container {
      border-radius: 10px;
      margin: 0px auto;
      width: 350px;
      padding: 30px 35px 15px 35px;
      background: #fff;
      border: 1px solid #eaeaea;
      text-align: left;
      box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
    }

    .title {
      margin: 0px auto 40px auto;
      text-align: center;
      color: #505458;
    }
  </style>
